<template>
  <div v-if="nodeDtos.length > 0">
    <div class="nodeDtos" v-if="type === '0' || type === '1'">
      <div class="head">发起流程</div>
      <div class="content">
        <div v-for="(item, index) in nodeDtos" :key="index" class="box">
          <div class="left">
            <img
              class="picture"
              :src="item.nodeType == 'APPROVER' ? imgAPPROVER : item.nodeType == 'START' ? imgSTART : imgNOTIFIER"
              alt=""
            />
            <div
              v-if="index !== nodeDtos.length - 1"
              style="width: 1px; min-height: 40px; height: 100%; background: #eee; margin-left: 25px"
            ></div>
          </div>

          <div class="center">
            <p class="title">{{ item.nodeName }}</p>
            <p>{{ getNodeDes(item) }}</p>
            <!-- <p class="name">{{ item.operatorList[0].realName }}{{ item.nodeStautsDesc }}</p>
            <p class="remarks">{{ item.operatorList[0].opinion }}</p> -->
          </div>
          <div class="right" style="width: 240px">
            <div class="flex">
              <div
                v-for="(i, j) in item.operatorList ? item.operatorList.slice(0, 2) : item.operatorList"
                :key="j"
                style="position: relative"
              >
                <img v-if="i.picUrl" class="pictures" :src="i.picUrl" alt="" />
                <span v-else class="pictures">{{ i.realName.slice(-2) }}</span>
                <a-icon
                  v-if="item.approvalType == 'target_select'"
                  class="close"
                  @click="del(index, j)"
                  type="close-circle"
                />
                <p class="name">{{ i.realName }}</p>
              </div>
              <div
                @click="seeAll(item)"
                v-if="item.operatorList && item.operatorList.length > 2"
                style="cursor: pointer"
              >
                <span class="pictures">···</span>
                <p class="name">查看全部</p>
              </div>
              <div
                class="plus"
                @click="selectUser(item, index)"
                v-if="
                  (item.approvalType == 'target_select' && !item.operatorList) ||
                  item.operatorList.length === 0 ||
                  item.properties.actionerRules[0].multi
                "
              >
                <a-icon type="plus" style="font-size: 25px; color: #1890ff" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <a-modal title="全部人员" :visible="allShow" @cancel="allShow = false" :footer="null">
        <div class="flex">
          <div v-for="(i, j) in itemList.operatorList" :key="j" style="position: relative">
            <img v-if="i.picUrl" class="pictures" :src="i.picUrl" alt="" />
            <span v-else class="pictures">{{ i.realName.slice(-2) }}</span>
            <a-icon
              v-if="itemList.approvalType == 'target_select'"
              class="close"
              @click="del(itemIndex, j)"
              type="close-circle"
            />
            <p class="name">{{ i.realName }}</p>
          </div>
        </div>
      </a-modal>
      <a-modal title="选择人员" :visible="selectShow" @cancel="selectShow = false" :footer="null">
        <div
          v-if="
            itemList.approvalType == 'target_select' &&
            itemList.properties.actionerRules[0].select &&
            itemList.properties.actionerRules[0].select[0] === 'allStaff'
          "
        >
          <j-select-user-by-dep
            v-model="userValue"
            :multi="itemList.approvalType == 'target_select' && itemList.properties.actionerRules[0].multi"
            @changeRow="onChangeUserName"
          ></j-select-user-by-dep>
        </div>
        <div v-else>
          <a-select
            @change="changes"
            style="width: 100%"
            :mode="
              itemList.approvalType == 'target_select' && itemList.properties.actionerRules[0].multi
                ? 'multiple'
                : 'default'
            "
            placeholder="请选择"
            v-model="userValue"
          >
            <a-select-option v-for="mode in memberList" :key="mode.value" :value="mode.value">
              {{ mode.label }}
            </a-select-option>
          </a-select>
        </div>

        <div style="padding-top: 20px; height: 45px">
          <a-button @click="selectShow = false" style="float: right" type="primary"> 确定 </a-button>
        </div>
      </a-modal>
    </div>
    <div class="nodeDtos" v-else-if="type === '2' && shows">
      <div class="head">审批流程</div>
      <div class="content">
        <div v-for="(item, index) in nodeDtos" :key="index" class="box">
          <div class="left">
            <div v-if="item.operatorList.length < 2">
              <img v-if="item.operatorList[0].picUrl" class="picture" :src="item.operatorList[0].picUrl" alt="" />
              <span v-else class="picture">{{ item.operatorList[0].realName.slice(-2) }}</span>
            </div>
            <div v-if="item.operatorList.length > 1">
              <img class="picture" :src="item.nodeType == 'APPROVER' ? imgAPPROVER : imgNOTIFIER" alt="" />
            </div>
            <div
              v-if="index !== nodeDtos.length - 1 && index <= result.approvedNodeNum - 2"
              style="width: 1px; min-height: 40px; height: 100%; background: #1890ff; margin-left: 25px"
            ></div>
            <div
              v-if="index !== nodeDtos.length - 1 && index > result.approvedNodeNum - 2"
              style="width: 1px; min-height: 40px; height: 100%; background: #eee; margin-left: 25px"
            ></div>
          </div>

          <div class="center">
            <div v-if="item.operatorList.length < 2">
              <p class="title">{{ item.nodeName }}</p>
              <p class="name">{{ item.operatorList[0].realName }}{{ item.nodeStautsDesc }}</p>
              <p class="remarks">{{ item.operatorList[0].opinion }}</p>
              <div style="margin:10px 0">
                <p v-if="item.operatorList[0].fileUrl">附件：</p>
              <file-detail :ids="item.operatorList[0].fileUrl"></file-detail>
              </div>
            </div>
            <div v-if="item.operatorList.length > 1">
              <p class="title">{{ item.nodeName }}</p>
              <p v-if="item.nodeStauts == 'running'">{{ item.operatorList.length }}人{{ getActivateType(item) }}</p>
              <div class="flex">
                <div v-for="(i, j) in item.operatorList" :key="j">
                  <img v-if="i.picUrl" class="pictures" :src="i.picUrl" alt="" />
                  <span v-else class="pictures">{{ i.realName.slice(-2) }}</span>
                  <p class="name">{{ i.realName }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="right">{{ item.approvalTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSelectListByIds, getRoleNotContainsMe } from '@/api/api'
import { getAction } from '@/api/manage'
import FileDetail from '@/components/fileActions/FileDetail'
import { getEnableOne } from '@/api/api'
export default {
  name: 'examine',
  props: {
    type: {
      type: String,
      default: '0', //0是新增1是编辑2是详情
    },
    id: {
      type: String,
      default: '',
    },
    ids: {
      type: String,
      default: '',
    },
  },
  components: { FileDetail },
  data() {
    return {
      url: {
        list: '/proc/model/lineInfo', //获取流程审批节点
        detail: '/proc/inst/getApprovalLine', //获取详情中流程流转记录
      },
      imgSTART: require('../../assets/process/START.png'),
      imgAPPROVER: require('../../assets/process/APPROVER.png'),
      imgNOTIFIER: require('../../assets/process/NOTIFIER.png'),
      stepsList: { START: '发起人', APPROVER: '审批人', END: '结束节点', NOTIFIER: '抄送人' }, //流程类型映射
      allShow: false, //人员弹窗
      result: {},
      nodeDtos: [], //流程节点
      selectShow: false, //选择人员弹窗
      itemList: {},
      itemIndex: null,
      memberList: [],
      userValue: null,
      shows: true
    }
  },
  created() {
    if (this.ids) {
      getEnableOne({id: this.ids, type: 'add'}).then(res => {
        if (res.result && res.result == 'false') {
          this.shows = false
        } else {
          this.shows = true
        }
      })
    }
    // '1170001'
    this.$nextTick(() => {
      if (this.type === '2') {
        getAction(this.url.detail, { flowInstId: this.id }).then((res) => {
          console.log(res, 'detail')
          if (res.success && res.result) {
            this.result = res.result
            this.nodeDtos = this.result.nodeDtos.filter((item) => item.nodeType != 'SERVICE')
          } else {
            // this.$antdMessage.warning(res.message)
          }
        })
      } else {
        // 'WMS_GOODS'
        getAction(this.url.list, { entityCode: this.id, operateType: this.type == '0' ? 'add' : 'edit' }).then(
          (res) => {
            console.log(res, 'aaaa')
            if (res.success && res.result) {
              this.result = res.result
              this.nodeDtos = this.result.nodeDtos.filter((item) => item.nodeType != 'SERVICE')
            } else {
              // this.$antdMessage.warning(res.message)
            }
          }
        )
        // this.nodeDtos = this.result.nodeDtos.filter((item) => item.nodeType != 'SERVICE')
      }
    })
  },
  methods: {
    getNodeDes(item) {
      const rangeSelect = {
        labels: '角色',
        approvals: '指定成员',
        allStaff: '全公司',
      }
      if (item.nodeType === 'APPROVER') {
        const num = item.operatorList ? item.operatorList.length + '人' : ''
        return num ? num + '审批' : '请选择审批人'
      }
      if (item.nodeType === 'NOTIFIER') {
        const type = rangeSelect[item.approvalType]
        const num = item.operatorList ? item.operatorList.length + '人' : ''
        return '抄送人' + num
      }
      return item.nodeType !== 'END' ? this.stepsList[item.nodeType] : ''
    },
    getActivateType(item) {
      if (item.properties.actionerRules[0].type === 'target_originator') {
        return ''
      }
      if (item.properties.activateType) {
        if (item.properties.activateType === 'ONE_BY_ONE') {
          return '依次审批'
        } else if (item.properties.agreeAll) {
          return '会签'
        } else {
          return '或签'
        }
      }
    },
    // 全部人员
    seeAll(e) {
      console.log(e, '全部人员')
      this.itemList = e
      this.allShow = true
    },
    // 选择人员
    selectUser(e, index) {
      this.itemList = e
      this.itemIndex = index
      console.log(e, this.itemList, index, this.itemIndex, '选择人员')
      let selectType = e.properties.actionerRules[0].select[0]
      if (selectType === 'approvals') {
        let arr = e.properties.actionerRules[0].range.approvals
        getSelectListByIds({ ids: arr.toString() }).then((res) => {
          console.log(res, 'approvals')
          this.memberList = res.result.map((e) => {
            return {
              label: e.realname,
              value: e.id,
            }
          })
        })
      } else if (selectType === 'labels') {
        getRoleNotContainsMe({
          roleId: e.properties.actionerRules[0].range.role[0].roleId,
          userKey: this.nodeDtos[0].operatorList[0].userId,
        }).then((res) => {
          console.log(res, 'labels')
          this.memberList = res.result.map((e) => {
            return {
              label: e.realName,
              value: e.userId,
            }
          })
        })
      }

      if (!this.itemList.operatorList) {
        this.itemList.operatorList = []
      }
      // this.selectShow = true
      // this.userValue = null
      if (this.itemList.properties.actionerRules[0].multi && selectType !== 'allStaff') {
        this.userValue = []
      } else {
        this.userValue = null
      }
      this.selectShow = true
    },
    onChangeUserName(a, b, c) {
      console.log(a, b, c)
      if (!this.nodeDtos[this.itemIndex].operatorList) {
        this.nodeDtos[this.itemIndex].operatorList = []
      }
      if (this.itemList.properties.actionerRules[0].multi) {
        let arr = b.map((e) => {
          return {
            realName: e.realname,
            userId: e.id,
          }
        })
        this.nodeDtos[this.itemIndex].operatorList = [...this.nodeDtos[this.itemIndex].operatorList, ...arr]
        let map = new Map()
        for (let i of this.nodeDtos[this.itemIndex].operatorList) {
          if (!map.has(i.userId)) {
            map.set(i.userId, i)
          }
        }
        this.nodeDtos[this.itemIndex].operatorList = [...map.values()]
        this.selectShow = false
      } else {
        // this.nodeDtos[this.itemIndex].operatorList.forEach((item) => {
        //   if (b[0].id === item.userId) {
        //     this.$antdMessage.warning('人员已存在')
        //   }
        // })
        this.nodeDtos[this.itemIndex].operatorList.push({
          realName: b[0].realname,
          userId: b[0].id,
          picUrl: '',
        })
        let map = new Map()
        for (let i of this.nodeDtos[this.itemIndex].operatorList) {
          if (!map.has(i.userId)) {
            map.set(i.userId, i)
          }
        }
        this.nodeDtos[this.itemIndex].operatorList = [...map.values()]
        this.selectShow = false
      }
    },
    changes(a) {
      if (!this.nodeDtos[this.itemIndex].operatorList) {
        this.nodeDtos[this.itemIndex].operatorList = []
      }
      if (this.itemList.properties.actionerRules[0].multi) {
        let arr = a.map((e) => {
          return {
            realName: this.memberList.find((item) => {
              return e === item.value
            }).label,
            userId: e,
          }
        })
        this.nodeDtos[this.itemIndex].operatorList = [...this.nodeDtos[this.itemIndex].operatorList, ...arr]
        let map = new Map()
        for (let i of this.nodeDtos[this.itemIndex].operatorList) {
          if (!map.has(i.userId)) {
            map.set(i.userId, i)
          }
        }
        this.nodeDtos[this.itemIndex].operatorList = [...map.values()]
      } else {
        let name = this.memberList.find((e) => {
          return a === e.value
        }).label

        this.nodeDtos[this.itemIndex].operatorList.push({
          realName: name,
          userId: a,
        })
        let map = new Map()
        for (let i of this.nodeDtos[this.itemIndex].operatorList) {
          if (!map.has(i.userId)) {
            map.set(i.userId, i)
          }
        }
        this.nodeDtos[this.itemIndex].operatorList = [...map.values()]
        console.log(this.nodeDtos[this.itemIndex].operatorList)
        this.selectShow = false
      }
    },
    // 删除
    del(a, b) {
      console.log(a, b)
      this.nodeDtos[a].operatorList.splice(b, 1)
    },
    confirm() {
      for (let i = 0; i < this.nodeDtos.length; i++) {
        this.nodeDtos[i].selectUsers = this.nodeDtos[i].operatorList
      }
      const isproNo = this.nodeDtos.filter((item) => {
        if (item.nodeType === 'SERVICE') {
          return false
        }
        return item.nodeType !== 'END' ? !item.selectUsers || item.selectUsers.length <= 0 : false
      })

      if (isproNo && isproNo.length > 0) {
        this.$antdMessage.warning('节点信息必填')
        return
      }
      let processDataVo = {
        formId: this.result.formId,
        nodeDtos: this.nodeDtos || [],
        processCode: this.result.processCode,
      }
      this.$nextTick(() => {
        // this.$parent.submitProcess(processDataVo)
        this.$emit('submitProcess', processDataVo)
      })
    },
  },
}
</script>
<style lang="less" scoped>
.nodeDtos {
  background: #fff;
  width: 100%;
  // height: 100%;
  .head {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #191f25;
    padding: 20px;
    border-bottom: 1px solid #eee;
  }
  .content {
    // width: 950px;
    margin-top: 2px;
    padding: 20px 20px 30px 20px;
    .box {
      display: flex;
      justify-content: start;
      position: relative;
      .left {
        width: 60px;
        .picture {
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #fff;
          background: #1890ff;
          display: block;
          border-radius: 8px;
        }
      }
      .center {
        min-width: 400px;
        p {
          margin-bottom: 5px !important;
          padding: 0;
        }
        .title {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #191f25;
        }
        .name {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #888888;
        }
        .remarks {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #444444;
          max-width: 60vw;
        }
        .flex {
          display: flex;
          justify-content: start;
          .pictures {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background: #1890ff;
            display: block;
            border-radius: 6px;
            font-size: 12px;
            margin-right: 20px;
          }
          .name {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #888888;
            margin-top: 5px;
          }
        }
      }
      .right {
        position: absolute;
        right: 0;
        width: 150px;
        height: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #888888;
        line-height: 38px;
        .flex {
          display: flex;
          justify-content: start;
          .close {
            position: absolute;
            top: 0;
            right: 15px;
            cursor: pointer;
            color: #f5f5f5;
          }
          .pictures {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background: #1890ff;
            display: block;
            border-radius: 6px;
            font-size: 12px;
            margin-right: 15px;
          }
          .name {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #888888;
          }
          .plus {
            width: 45px;
            height: 45px;
            line-height: 52px;
            text-align: center;
            color: #fff;
            border: 1px dashed #1890ff;
            display: block;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.flex {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  .close {
    position: absolute;
    top: 0;
    right: 15px;
    cursor: pointer;
    color: #f5f5f5;
  }
  .pictures {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    display: block;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 15px;
  }
  .name {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #888888;
  }
}
</style>